<template>
	<view class="d-flex w-100 flex-column" style="height: 100%;">
		<u-swiper :list="swiperList" height="364" indicator-pos="bottomRight" :autoplay="false" mode="number"></u-swiper>

		<view class="flex-1 w-100 mt-2 px-1">
			<view class="info p-2 position-relative">
				<view class="font-md font-weight border-bottom py-1" style="border-color: #DEDEDE;">{{ publicinfo.siteName }}</view>
				<view class="info_text font textIndent2 line-h-sm p-1" style="color: #3D3B3B;">{{ publicinfo.siteIntroduce }}</view>

				<scroll-view scroll-y="true" style="height: calc(100vh - 410px); " :scroll-top="formTop" scroll-with-animation>
					<view class="px-2" style=" padding-bottom: 60rpx;">
						<u-form :model="form" ref="uForm" :error-type="errortype" label-width="140">
							<u-form-item label="联系人" prop="linkman" required><u-input v-model="form.linkman" placeholder="请输入联系人" /></u-form-item>
							<u-form-item label="联系电话" prop="phone" required><u-input v-model="form.phone" placeholder="请输入联系电话" type="number" :maxlength="11" /></u-form-item>
							<u-form-item label="单位名称" prop="company" required><u-input v-model="form.company" placeholder="请输入单位名称" /></u-form-item>

							<u-form-item label="单位详址" prop="companySite"><u-input v-model="form.companySite" placeholder="请输入单位详址" /></u-form-item>

							<u-form-item label="备注" prop="remark" label-position="top" label-align="left">
								<u-input type="textarea" height="200" v-model="form.remark" border placeholder="请输入备注" maxlength="200" />
							</u-form-item>

							<u-form-item label="图片上传">
								<u-upload
									:custom-btn="true"
									:action="action"
									:header="header"
									:before-upload="beforeUpload"
									@on-success="uploadSuccess"
									@on-remove="fileRemove"
									max-count="1"
									:form-data="formData"
								>
									<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"><u-icon name="photo" size="60" color="#c0c4cc"></u-icon></view>
								</u-upload>
							</u-form-item>
						</u-form>
						<view class="d-flex j-end" @tap="callBackCallPhone('19179169832')">
							联系人：
							<text class="ml-1">付小姐：19179169832</text>
						</view>
					</view>
				</scroll-view>

				<view class="position-absolute left-0 px-2" style="width: 100%; bottom:30rpx;"><u-button type="error" :loading="isGo" ripple @click="nowSubmit">提交申请</u-button></view>
			</view>
		</view>
	</view>
</template>

<script>
import { appointmentId, publicSiteAdd } from '@/api/property/property.js';
import { active } from '@/api/loadFile.js';
export default {
	data() {
		return {
			formTop: 0,
			isGo: false,
			id: 0,
			swiperList: [],
			publicinfo: {},
			action: active,
			errortype: ['border-bottom', 'toast'],
			formData: {
				src: ''
			},
			header: {
				token: uni.getStorageSync('token') || '',
				Cookie: uni.getStorageSync('token') || ''
			},
			form: {
				linkman: '',
				phone: '',
				companySite: '',
				company: '',
				remark: '',
				filePath: ''
			},
			rules: {
				linkman: [
					{
						required: true,
						message: '请输入联系人姓名',
						trigger: ['change', 'blur']
					},
					{
						min: 2,
						max: 4,
						message: '名字不能少于2字，并多于4字',
						trigger: 'change'
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.chinese(value);
						},
						message: '请输入中文名字',
						trigger: ['change', 'blur']
					}
				],
				company: [
					{
						required: true,
						message: '请输入单位名称',
						trigger: ['change', 'blur']
					}
				],
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur']
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '请输入正确手机号',
						trigger: ['change', 'blur']
					}
				]
				// companySite: [
				// 	{
				// 		required: true,
				// 		message: '请输入详细地址',
				// 		trigger: ['change', 'blur']
				// 	}
				// ],
				// remark: [
				// 	{
				// 		max: 200,
				// 		required: true,
				// 		message: '请输入描述',
				// 		trigger: ['change', 'blur']
				// 	}
				// ]
			}
		};
	},
	onLoad(op) {
		this.id = op.id;
		if (op.id) {
			this.setServeTypeInfo(op.id);
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		async addPublicSite(form) {
			const formResult = JSON.parse(JSON.stringify(form));
			formResult.siteId = this.publicinfo.siteId;
			const res = await publicSiteAdd(formResult);
			if (res.flag) {
				this.isGo = false;
				this.$refs.uForm.resetFields();
				uni.showToast({
					title: '预约' + this.publicinfo.siteName + '成功',
					icon: 'success',
					success: () => {
						uni.switchTab({
							url:'/pages/property/property'
						})
					}
				});
			} else {
				this.isGo = false;
				this.$u.toast(res.message);
			}
			this.isGo = false;
		},
		nowSubmit() {
			// 提交申请单
			if (this.isGo) return;
			// 第一次提交状态
			const form = this.fromTrim(this.form);

			this.$refs.uForm.validate(valid => {
				if (valid) {
					this.isGo = true;
					this.addPublicSite(form);
				} else {
					this.formTop += 1;

					this.isGo = false;
				}
			});
		},
		async setServeTypeInfo(id) {
			const { result: res } = await appointmentId(id);

			this.publicinfo = res;

			for (let key in res) {
				if (key.indexOf('file') >= 0) {
					this.swiperList.push({ image: res[key] });
				}
			}

			uni.setNavigationBarTitle({
				title: res.siteName
			});
		},
		beforeUpload(index, list) {
			// 图片上传前
			uni.getFileSystemManager().readFile({
				filePath: list[0].url,
				encoding: 'base64',
				success: r => {
					let base64 = r.data;
					this.formData.src = base64;
				}
			});
			//
		},
		uploadSuccess(data) {
			// 图片上传成功
			console.log(data);
			if (data.flag) {
				this.form.filePath = data.result;
			} else {
				this.$u.toast('上传失败！');
			}
		},
		fileRemove() {
			// 图片移除
			this.form.filePath = '';
		},
		callBackCallPhone(phone) {
			uni.makePhoneCall({
				phoneNumber: phone,
				success: res => {},
				fail: err => err
			});
		},
		fromTrim(form) {
			// 表单两头去空
			let flag = true;
			for (let key in form) {
				if (form[key] instanceof String) {
					form[key] = form[key].trim();
				}
			}
			return form;
		}
	}
};
</script>

<style scoped>
.info {
	width: 100%;
	height: 100%;
	background: #f4f3f8;
	box-shadow: 0px 3rpx 7rpx 0px rgba(99, 100, 101, 0.5);
	border-radius: 15rpx 15rpx 0 0;
}

.slot-btn {
	width: 200rpx;
	height: 200rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgb(244, 245, 246);
	border: 2rpx solid #eee;
	border-radius: 10rpx;
}

.slot-btn__hover {
	background-color: rgb(235, 236, 238);
}
</style>
